<template>
  <div>
    <div>
      <el-divider content-position="left">您具有一定的操作权限</el-divider>
    </div>

    <div>
      <el-divider>
        <span id="spanlittlepart">查询</span>
      </el-divider>
    </div>

    <!-- 查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="植株名" style="width: 150px">
        <el-input
          v-model="checkformInline.cropinfo"
          placeholder="cropname"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 200px">
        <el-button @click="search" type="primary" plain style="width: 200px"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-divider>
      <el-icon><star-filled /></el-icon>
    </el-divider>

    <el-button type="primary" plain :onclick="onAddItem" class="addbtn">
      <el-icon>
        <Edit />
      </el-icon>
      <span> 创建新的植物生长各阶段</span>
    </el-button>

    <!-- Form新建 -->
    <el-dialog v-model="dialogaddFormVisible" title="新建项">
      <el-form :model="addform">
        <el-form-item
          label="植株名"
          :label-width="formLabelWidth"
          :rules="[{ required: true, message: '植株名不能为空' }]"
        >
          <el-input v-model="addform.cropinfo" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div class="contentPics">
        <el-divider content-position="center">生长阶段1</el-divider>
        <el-form-item
          label="该阶段所需生长天数"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '该阶段所需生长天数不能为空' },
            { type: 'number', message: '该阶段所需生长天数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage1growday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="浇水周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日浇水次数不能为空' },
            { type: 'number', message: '每日浇水次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage1waterday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="施肥周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日施肥次数不能为空' },
            { type: 'number', message: '每日施肥次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage1fertilize" autocomplete="off" />
        </el-form-item>
      </div>
      <el-upload
        v-model:file-list="stage1growimgfileList"
        class="upload-demo"
        action="#"
        :on-preview="handlePreviewstage1"
        :auto-upload="false"
        :before-upload="handleChangestage1"
        :on-remove="handleRemovestage1"
        list-type="picture"
      >
        <el-button type="primary">点击上传生长阶段1图片</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传图片文件，如上传多张图片：图片总大小应小于20MB，如超过20MB请压缩图片或进行多次上传
          </div>
        </template>
      </el-upload>

      <div class="contentPics">
        <el-divider content-position="center">生长阶段2</el-divider>
        <el-form-item
          label="该阶段所需生长天数"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '该阶段所需生长天数不能为空' },
            { type: 'number', message: '该阶段所需生长天数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage2growday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="浇水周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日浇水次数不能为空' },
            { type: 'number', message: '每日浇水次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage2waterday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="施肥周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日施肥次数不能为空' },
            { type: 'number', message: '每日施肥次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage2fertilize" autocomplete="off" />
        </el-form-item>
      </div>
      <el-upload
        v-model:file-list="stage2growimgfileList"
        class="upload-demo"
        action="#"
        :on-preview="handlePreviewstage2"
        :auto-upload="false"
        :before-upload="handleChangestage2"
        :on-remove="handleRemovestage2"
        list-type="picture"
      >
        <el-button type="primary">点击上传生长阶段2图片</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传图片文件，如上传多张图片：图片总大小应小于20MB，如超过20MB请压缩图片或进行多次上传
          </div>
        </template>
      </el-upload>

      <div class="contentPics">
        <el-divider content-position="center">生长阶段3</el-divider>
        <el-form-item
          label="该阶段所需生长天数"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '该阶段所需生长天数不能为空' },
            { type: 'number', message: '该阶段所需生长天数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage3growday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="浇水周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日浇水次数不能为空' },
            { type: 'number', message: '每日浇水次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage3waterday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="施肥周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日施肥次数不能为空' },
            { type: 'number', message: '每日施肥次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage3fertilize" autocomplete="off" />
        </el-form-item>
      </div>
      <el-upload
        v-model:file-list="stage3growimgfileList"
        class="upload-demo"
        action="#"
        :on-preview="handlePreviewstage3"
        :auto-upload="false"
        :before-upload="handleChangestage3"
        :on-remove="handleRemovestage3"
        list-type="picture"
      >
        <el-button type="primary">点击上传生长阶段3图片</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传图片文件，如上传多张图片：图片总大小应小于20MB，如超过20MB请压缩图片或进行多次上传
          </div>
        </template>
      </el-upload>

      <div class="contentPics">
        <el-divider content-position="center">生长阶段4</el-divider>
        <el-form-item
          label="该阶段所需生长天数"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '该阶段所需生长天数不能为空' },
            { type: 'number', message: '该阶段所需生长天数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage4growday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="浇水周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日浇水次数不能为空' },
            { type: 'number', message: '每日浇水次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage4waterday" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="施肥周期"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '每日施肥次数不能为空' },
            { type: 'number', message: '每日施肥次数需要为数字' },
          ]"
        >
          <el-input v-model="addform.stage4fertilize" autocomplete="off" />
        </el-form-item>
      </div>
      <el-upload
        v-model:file-list="stage4growimgfileList"
        class="upload-demo"
        action="#"
        :on-preview="handlePreviewstage4"
        :auto-upload="false"
        :before-upload="handleChangestage4"
        :on-remove="handleRemovestage4"
        list-type="picture"
      >
        <el-button type="primary">点击上传生长阶段4图片</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传图片文件，如上传多张图片：图片总大小应小于20MB，如超过20MB请压缩图片或进行多次上传
          </div>
        </template>
      </el-upload>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closemodal">取消</el-button>
          <el-button type="primary" @click="onaddSaveInfo"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 展示表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :highlight-current-row="true"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        prop="grownum"
        label="种植阶段"
        width="100px"
        :filters="[
          { text: 0, value: 0 },
          { text: 1, value: 1 },
          { text: 2, value: 2 },
          { text: 3, value: 3 },
          { text: 4, value: 4 },
        ]"
        :filter-method="filterHandler"
      />
      <el-table-column prop="growday" label="某一种植阶段的进行天数" width="" />
      <el-table-column prop="cropinfo" label="植株名" width="" />
      <el-table-column label="生长图片" width="130px">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image
              style="
                width: 100px;
                height: 100px;
                padding-left: -30px;
                margin-left: -30px;
                overflow: visible;
              "
              :src="baseURL + tableData[scope.$index].growimg"
              :preview-src-list="[baseURL + tableData[scope.$index].growimg]"
              :preview-teleported="true"
              :initial-index="scope.$index"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="waterday" label="浇水周期" width="" />
      <el-table-column prop="fertilize" label="施肥周期" width="" />
      <el-table-column fixed="right" label="操作1" width="200">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作2" width="200">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="page"
      @update:current-page="handleCurrentChange"
      :total="total"
      :page-size="size"
      style="bottom: 0; text-align: center; margin-left: 35%; margin-top: 5px"
    />

    <!-- Form -->
    <el-dialog v-model="dialogFormVisible" title="编辑">
      <el-form :model="form">
        <el-form-item label="植株名" :label-width="formLabelWidth">
          <el-select v-model="form.cropinfo" placeholder="请选择植株">
            <div v-for="item in cropOptions" :key="item.label">
              <el-option :label="item.label" :value="item.value" />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="该阶段所需生长天数" :label-width="formLabelWidth">
          <el-input v-model="form.growday" autocomplete="off" />
        </el-form-item>
        <el-form-item label="浇水周期" :label-width="formLabelWidth">
          <el-input v-model="form.waterday" autocomplete="off" />
        </el-form-item>
        <el-form-item label="施肥周期" :label-width="formLabelWidth">
          <el-input v-model="form.fertilize" autocomplete="off" />
        </el-form-item>
      </el-form>
      <el-upload
        v-model:file-list="editfileList"
        class="upload-demo"
        action="#"
        :on-preview="handlePreview"
        :auto-upload="false"
        :before-upload="handleChange"
        :on-remove="handleRemove"
        list-type="picture"
      >
        <el-button type="primary">点击进行植株生长阶段图片上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传图片文件，如上传多张图片：图片总大小应小于20MB，如超过1MB请压缩图片或进行多次上传
          </div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="onSaveInfo"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  Guide,
  PictureFilled,
  User,
  HomeFilled,
  ChatLineSquare,
  Apple,
  Document,
  List,
  Tools,
  ShoppingCart,
  CollectionTag,
  Finished,
  InfoFilled,
  Cherry,
  Goods,
  Sell,
  ShoppingCartFull,
  Van,
  Sunrise,
  StarFilled,
  EditPen,
  Edit,
  Promotion,
  Grape,
  Pear,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
const formLabelWidth = "140px";
const filterHandler = (value, row, column) => {
  const property = column["property"];
  return row[property] === value;
};
</script>
<script>
export default {
  data() {
    return {
      baseURL: "http://localhost:8080",
      stageChosen: 0,
      stageOptions: [
        {
          value: 0,
          label: 0,
        },
        {
          value: 1,
          label: 1,
        },
        {
          value: 2,
          label: 2,
        },
        {
          value: 3,
          label: 3,
        },
        {
          value: 4,
          label: 4,
        },
      ],
      potChosen: 0,
      potOptions: [],
      cropChosen: 0,
      cropOptions: [],
      formInline: {
        growid: 0,
        grownum: "",
        growday: "",
        cropsid: 0,
        growimg: "",
        potid: 0,
        waterday: "",
        fertilize: "",
        cropinfo: "",
        potinfo: "",
      },
      checkformInline: {
        growid: 0,
        grownum: "",
        growday: "",
        cropsid: 0,
        growimg: "",
        potid: 0,
        waterday: "",
        fertilize: "",
        cropinfo: "",
        potinfo: "",
      },
      dialogFormVisible: false,
      dialogaddFormVisible: false,
      showSearch: false,
      tableData: [],
      tableDataStore: [],
      tableimgList: [],
      tableimg: "",
      growtime: {
        growid: 0,
        grownum: "",
        growday: "",
        cropsid: 0,
        growimg: "",
        potid: 0,
        waterday: "",
        fertilize: "",
        cropinfo: "",
        potinfo: "",
      },
      basedata: "",
      form: {
        growid: 0,
        grownum: "",
        stage1grownum: 1,
        stage2grownum: 2,
        stage3grownum: 3,
        stage4grownum: 4,
        growday: "",
        stage1growday: 0,
        stage2growday: 0,
        stage3growday: 0,
        stage4growday: 0,
        cropsid: 0,
        growimg: "",
        stage1growimg: "",
        stage2growimg: "",
        stage3growimg: "",
        stage4growimg: "",
        potid: 0,
        waterday: "",
        stage1waterday: "",
        stage2waterday: "",
        stage3waterday: "",
        stage4waterday: "",
        fertilize: "",
        stage1fertilize: "",
        stage2fertilize: "",
        stage3fertilize: "",
        stage4fertilize: "",
        cropinfo: "",
        potinfo: "",
      },
      addform: {
        growid: 0,
        grownum: "",
        stage1grownum: 1,
        stage2grownum: 2,
        stage3grownum: 3,
        stage4grownum: 4,
        growday: "",
        stage1growday: "",
        stage2growday: "",
        stage3growday: "",
        stage4growday: "",
        cropsid: 0,
        growimg: "",
        stage1growimg: "",
        stage2growimg: "",
        stage3growimg: "",
        stage4growimg: "",
        potid: 0,
        waterday: "",
        stage1waterday: "",
        stage2waterday: "",
        stage3waterday: "",
        stage4waterday: "",
        fertilize: "",
        stage1fertilize: "",
        stage2fertilize: "",
        stage3fertilize: "",
        stage4fertilize: "",
        cropinfo: "",
        potinfo: "",
      },
      searchForm: [],
      filetype: ["jpg", "jpeg", "png"],
      page: 1, // 当前页码
      total: 0, // 总条数
      size: 8, // 每页的数据条数
      reallyTable: [],
      selData: [],
      editfileList: [], //编辑modal种商品描述图片的列表
      growimgfileList: [],
      stage1growimgfileList: [],
      stage2growimgfileList: [],
      stage3growimgfileList: [],
      stage4growimgfileList: [],
      stage1growimgfileArray: [],
      stage2growimgfileArray: [],
      stage3growimgfileArray: [],
      stage4growimgfileArray: [],
      fileArray: [],
      fileList: [],
    };
  },
  methods: {
    init() {
      axios({
        method: "post",
        url: "http://localhost:8080/growtime/getgrowtime",
        withCredentials: true,
      }).then((res) => {
        this.tableData = res.data.data;
        this.tableDataStore = res.data.data;
        console.log(res.data.data);
        this.tableData = res.data.data.slice(
          (this.page - 1) * this.size,
          this.page * this.size
        );
        this.total = res.data.data.length;
        this.selData = res.data.data;
        for (var i = 0; i < res.data.data.length; i++) {
          //console.log(res.data.data[i].cropinfo);
          this.tableimgList.push(res.data.data[i].growimg);
          this.cropOptions.push({
            value: res.data.data[i].cropall,
            label: res.data.data[i].cropall,
          });
          this.potOptions.push({
            value: res.data.data[i].potall,
            label: res.data.data[i].potall,
          });
        }
        this.handleArr(this.cropOptions);
        this.handleArr(this.potOptions);
        this.cropOptions.pop();
        this.potOptions.pop();
        console.log(this.cropOptions);
        console.log(this.potOptions);
        //console.log("tableimglist:" + this.tableimgList);
        this.tableimg = this.tableimgList[0];
        //console.log("tableimg：-------->" + this.tableimg);
      });
    },
    search() {
      let arr = [];
      console.log(this.tableDataStore.length);
      for (let i = 0; i < this.tableDataStore.length; i++) {
        if (
          String(this.tableDataStore[i].cropinfo).includes(
            this.checkformInline.cropinfo
          ) &&
          String(this.tableDataStore[i].potinfo).includes(
            this.checkformInline.potinfo
          )
        ) {
          arr.push(this.tableDataStore[i]);
        }
      }
      console.log(arr);
      this.size = 8;
      this.tableData = arr.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.selData = arr;
      this.total = arr.length;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 8) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    //删除表格行
    handleDelete(index, row) {
      console.log(index, row);
      console.log(row.growid); //可以获取到
      console.log(this.tableData[index]);
      ElMessageBox.confirm("确认删除本项吗？删除后无法找回:-0", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "post",
            url: "http://localhost:8080/growtime/delgrowtimebackend",
            withCredentials: true,
            data: {
              growid: [
                this.tableData[index],
                this.tableData[index + 1],
                this.tableData[index + 2],
                this.tableData[index + 3],
              ],
            },
          }).then((res) => {
            this.tableData = res.data.data;
            this.tableDataStore = res.data.data;
            console.log(res.data.data);
            this.tableData = res.data.data.slice(
              (this.page - 1) * this.size,
              this.page * this.size
            );
            this.total = res.data.data.length;
            this.selData = res.data.data;
            for (var i = 0; i < res.data.data.length; i++) {
              //console.log(res.data.data[i].cropinfo);
              this.tableimgList.push(res.data.data[i].growimg);
              this.cropOptions.push({
                value: res.data.data[i].cropall,
                label: res.data.data[i].cropall,
              });
              this.potOptions.push({
                value: res.data.data[i].potall,
                label: res.data.data[i].potall,
              });
            }
            this.handleArr(this.cropOptions);
            this.handleArr(this.potOptions);
            this.cropOptions.pop();
            this.potOptions.pop();
            console.log(this.cropOptions);
            console.log(this.potOptions);
            //console.log("tableimglist:" + this.tableimgList);
            this.tableimg = this.tableimgList[0];
            //console.log("tableimg：-------->" + this.tableimg);
            ElMessage({
              type: "success",
              message: "删除成功",
            });
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除操作",
          });
        });
    },
    filterArr(arr1, arr2) {
      var uid1 = [];
      var uid2 = [];
      for (var i in arr1) {
        uid1.push(arr1[i]);
      }
      for (var j in arr2) {
        uid2.push(arr2[j]);
      }
      const arr = [...uid1, ...uid2];
      console.log(arr);
      const newArr = arr.filter((item) => {
        return !uid2.includes(item);
      });
      return newArr;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange(file, fileList) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let fileName = file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      let isAccept = true;
      if (
        lastName.toLowerCase() !== ".jpg" &&
        lastName.toLowerCase() !== ".png" &&
        lastName.toLowerCase() !== ".jpeg"
      ) {
        this.$message.error("文件必须为.jpg,.png,.jpeg类型");
        isAccept = false;
        // 清空文件列表
        const newFileList = this.fileList.slice();
        newFileList.splice(0, 1);
        this.fileList = newFileList;
      }
    },
    handleRemovestage1(file, fileList) {
      this.stage1growimgfileList = fileList;
    },
    handlePreviewstage1(file) {
      console.log(file);
    },
    handleChangestage1(file, fileList) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let fileName = file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      let isAccept = true;
      if (
        lastName.toLowerCase() !== ".jpg" &&
        lastName.toLowerCase() !== ".png" &&
        lastName.toLowerCase() !== ".jpeg"
      ) {
        this.$message.error("文件必须为.jpg,.png,.jpeg类型");
        isAccept = false;
        // 清空文件列表
        const newFileList = this.stage1growimgfileList.slice();
        newFileList.splice(0, 1);
        this.stage1growimgfileList = newFileList;
      }
    },
    handleRemovestage2(file, fileList) {
      this.stage2growimgfileList = fileList;
    },
    handlePreviewstage2(file) {
      console.log(file);
    },
    handleChangestage2(file, fileList) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let fileName = file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      let isAccept = true;
      if (
        lastName.toLowerCase() !== ".jpg" &&
        lastName.toLowerCase() !== ".png" &&
        lastName.toLowerCase() !== ".jpeg"
      ) {
        this.$message.error("文件必须为.jpg,.png,.jpeg类型");
        isAccept = false;
        // 清空文件列表
        const newFileList = this.stage2growimgfileList.slice();
        newFileList.splice(0, 1);
        this.stage2growimgfileList = newFileList;
      }
    },
    handleRemovestage3(file, fileList) {
      this.stage3growimgfileList = fileList;
    },
    handlePreviewstage3(file) {
      console.log(file);
    },
    handleChangestage3(file, fileList) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let fileName = file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      let isAccept = true;
      if (
        lastName.toLowerCase() !== ".jpg" &&
        lastName.toLowerCase() !== ".png" &&
        lastName.toLowerCase() !== ".jpeg"
      ) {
        this.$message.error("文件必须为.jpg,.png,.jpeg类型");
        isAccept = false;
        // 清空文件列表
        const newFileList = this.stage3growimgfileList.slice();
        newFileList.splice(0, 1);
        this.stage3growimgfileList = newFileList;
      }
    },
    handleRemovestage4(file, fileList) {
      this.stage4growimgfileList = fileList;
    },
    handlePreviewstage4(file) {
      console.log(file);
    },
    handleChangestage4(file, fileList) {
      let isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error("文件大小超过 20MB");
      }
      let fileName = file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      let isAccept = true;
      if (
        lastName.toLowerCase() !== ".jpg" &&
        lastName.toLowerCase() !== ".png" &&
        lastName.toLowerCase() !== ".jpeg"
      ) {
        this.$message.error("文件必须为.jpg,.png,.jpeg类型");
        isAccept = false;
        // 清空文件列表
        const newFileList = this.stage4growimgfileList.slice();
        newFileList.splice(0, 1);
        this.stage4growimgfileList = newFileList;
      }
    },
    //编辑表格行
    handleEdit(index, row) {
      console.log(index, row);
      let dif = this.filterArr([1, 2, 3], [2, 3, 4]);
      console.log(dif);
      this.editfileList=[{
        name: "生长图片",
        url: "http://localhost:8080" + row.growimg,
      }];
      this.dialogFormVisible = true;
      axios({
        method: "post",
        url: "http://localhost:8080/growtime/getsingle",
        withCredentials: true,
        data: {
          growid: index,
        },
      }).then((res) => {
        this.form = row;
      });
    },
    async onSaveInfo() {
      if (
        isNaN(this.form.grownum) ||
        isNaN(this.form.growday) ||
        isNaN(this.form.waterday) ||
        isNaN(this.form.fertilize)
      ) {
        alert(
          "生长阶段、每阶段生长时间、浇水周期、施肥周期需要为数字，请重新输入"
        );
      } else if (
        this.form.growid != "" &&
        this.form.cropinfo != "" &&
        this.form.potinfo != "" &&
        this.form.grownum != "" &&
        this.form.growday != "" &&
        this.form.waterday != "" &&
        this.form.fertilize != ""
      ) {
        const fileArray = this.editfileList;
        console.log(this.editfileList);
        this.fileArray = fileArray;
        console.log(fileArray);
        for (let i = fileArray.length - 1; i >= 0; i--) {
          let lastName = this.getLastName(fileArray, i);
          await this.getBase64(fileArray[i].url).then((res) => {
            this.fileArray[i].url = res;
            this.fileArray[i].name =
              new Date().getTime() +
              Math.floor(Math.random() * (0 - 1000)) +
              1000 +
              "." +
              lastName;
          });
        }

        axios({
          method: "post",
          url: "http://localhost:8080/growtime/modifyuploadimggrowtimebackend",
          withCredentials: true,
          data: {
            growid: this.form.growid,
            grownum: this.form.grownum,
            growday: this.form.growday,
            waterday: this.form.waterday,
            fertilize: this.form.fertilize,
            cropinfo: this.form.cropinfo,
            potinfo: this.form.potinfo,
            growimg: this.fileArray,
          },
        }).then((res) => {
          this.tableData = res.data.data;
          this.tableDataStore = res.data.data;
          console.log(res.data.data);
          this.tableData = res.data.data.slice(
            (this.page - 1) * this.size,
            this.page * this.size
          );
          this.total = res.data.data.length;
          this.selData = res.data.data;
          for (var i = 0; i < res.data.data.length; i++) {
            //console.log(res.data.data[i].cropinfo);
            this.tableimgList.push(res.data.data[i].growimg);
            this.cropOptions.push({
              value: res.data.data[i].cropall,
              label: res.data.data[i].cropall,
            });
            this.potOptions.push({
              value: res.data.data[i].potall,
              label: res.data.data[i].potall,
            });
          }
          this.handleArr(this.cropOptions);
          this.handleArr(this.potOptions);
          this.cropOptions.pop();
          this.potOptions.pop();
          console.log(this.cropOptions);
          console.log(this.potOptions);
          //console.log("tableimglist:" + this.tableimgList);
          this.tableimg = this.tableimgList[0];
          //console.log("tableimg：-------->" + this.tableimg);
        });
        this.editfileList=[]
        this.dialogFormVisible = false;
      } else {
        ElMessage.error("存在未输入项");
      }
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.tableData = this.selData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      // this.currentPage = val;
      const data = { page: val };
      // await this.onload(data)
    },
    // 判断对象数组中是否含有某值
    indexOF(array, attr, val) {
      for (var i = 0; i < array.length; i++) {
        if (array[i][attr] == val) {
          return i; //返回当前索引值
        }
      }
      return -1;
    },
    //增添项
    onAddItem() {
      this.dialogaddFormVisible = true;
      console.log(this.tableDataStore, "让我康康");
      const index = this.indexOF(this.tableDataStore, "cropall", "蓝莓");
      console.log(index);
    },
    getLastName(fileArray, i) {
      let pos = fileArray[i].name.lastIndexOf(".");
      let lastName = fileArray[i].name.substring(
        pos + 1,
        fileArray[i].name.length
      );
      console.log(lastName);
      return lastName;
    },
    getBase64(imgUrl) {
      return new Promise((resolve, reject) => {
        if (!imgUrl) {
          reject("请传入imgUrl内容");
        }
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("get", imgUrl, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (this.status == 200) {
            // 得到一个blob对象
            var blob = this.response;
            const oFileReader = new FileReader();
            oFileReader.onloadend = function (e) {
              const base64 = e.target.result;
              resolve(base64 || "");
            };
            oFileReader.readAsDataURL(blob);
          }
        };
        xhr.send();
      });
    },
    closemodal() {
      this.dialogaddFormVisible = false;
      this.fileList = [];
      this.stage1growimgfileList = [];
      this.stage2growimgfileList = [];
      this.stage3growimgfileList = [];
      this.stage4growimgfileList = [];
      this.addform = [];
    },
    async onaddSaveInfo() {
      if (
        isNaN(this.addform.stage1grownum) ||
        isNaN(this.addform.stage1growday) ||
        isNaN(this.addform.stage1waterday) ||
        isNaN(this.addform.stage1fertilize)
      ) {
        alert(
          "生长阶段1的每阶段生长时间、一天需浇水次数、一天需施肥次数需要为数字，请重新输入"
        );
      } else if (
        isNaN(this.addform.stage2grownum) ||
        isNaN(this.addform.stage2growday) ||
        isNaN(this.addform.stage2waterday) ||
        isNaN(this.addform.stage2fertilize)
      ) {
        alert(
          "生长阶段2的每阶段生长时间、浇水周期、一天需施肥次数需要为数字，请重新输入"
        );
      } else if (
        isNaN(this.addform.stage3grownum) ||
        isNaN(this.addform.stage3growday) ||
        isNaN(this.addform.stage3waterday) ||
        isNaN(this.addform.stage3fertilize)
      ) {
        alert(
          "生长阶段3的每阶段生长时间、浇水周期、一天需施肥次数需要为数字，请重新输入"
        );
      } else if (
        isNaN(this.addform.stage4grownum) ||
        isNaN(this.addform.stage4growday) ||
        isNaN(this.addform.stage4waterday) ||
        isNaN(this.addform.stage4fertilize)
      ) {
        alert(
          "生长阶段4的每阶段生长时间、浇水周期、一天需施肥次数需要为数字，请重新输入"
        );
      } else if (
        this.addform.cropinfo != "" &&
        this.addform.stage1grownum != "" &&
        this.addform.stage1growday != "" &&
        this.addform.stage2grownum != "" &&
        this.addform.stage2growday != "" &&
        this.addform.stage3grownum != "" &&
        this.addform.stage3growday != "" &&
        this.addform.stage4grownum != "" &&
        this.addform.stage4growday != "" &&
        this.addform.stage1waterday != "" &&
        this.addform.stage1fertilize != "" &&
        this.addform.stage2waterday != "" &&
        this.addform.stage2fertilize != "" &&
        this.addform.stage3waterday != "" &&
        this.addform.stage3fertilize != "" &&
        this.addform.stage4waterday != "" &&
        this.addform.stage4fertilize != ""
      ) {
        console.log("submit!");
        const stage1fileArray = this.stage1growimgfileList;
        const stage2fileArray = this.stage2growimgfileList;
        const stage3fileArray = this.stage3growimgfileList;
        const stage4fileArray = this.stage4growimgfileList;

        this.stage1growimgfileArray = stage1fileArray;
        this.stage2growimgfileArray = stage2fileArray;
        this.stage3growimgfileArray = stage3fileArray;
        this.stage4growimgfileArray = stage4fileArray;

        console.log(this.stage4growimgfileArray);

        for (let i = stage1fileArray.length - 1; i >= 0; i--) {
          let lastName = this.getLastName(stage1fileArray, i);
          await this.getBase64(stage1fileArray[i].url).then((res) => {
            this.stage1growimgfileArray[i].url = res;
            this.stage1growimgfileArray[i].name =
              new Date().getTime() +
              Math.floor(Math.random() * (0 - 1000)) +
              1000 +
              "." +
              lastName;
          });
        }

        for (let i = stage2fileArray.length - 1; i >= 0; i--) {
          let lastName = this.getLastName(stage2fileArray, i);
          await this.getBase64(stage2fileArray[i].url).then((res) => {
            this.stage2growimgfileArray[i].url = res;
            this.stage2growimgfileArray[i].name =
              new Date().getTime() +
              Math.floor(Math.random() * (0 - 1000)) +
              1000 +
              "." +
              lastName;
          });
        }

        for (let i = stage3fileArray.length - 1; i >= 0; i--) {
          let lastName = this.getLastName(stage3fileArray, i);
          await this.getBase64(stage3fileArray[i].url).then((res) => {
            this.stage3growimgfileArray[i].url = res;
            this.stage3growimgfileArray[i].name =
              new Date().getTime() +
              Math.floor(Math.random() * (0 - 1000)) +
              1000 +
              "." +
              lastName;
          });
        }

        for (let i = stage4fileArray.length - 1; i >= 0; i--) {
          let lastName = this.getLastName(stage4fileArray, i);
          await this.getBase64(stage4fileArray[i].url).then((res) => {
            this.stage4growimgfileArray[i].url = res;
            this.stage4growimgfileArray[i].name =
              new Date().getTime() +
              Math.floor(Math.random() * (0 - 1000)) +
              1000 +
              "." +
              lastName;
          });
        }

        console.log(this.stage4growimgfileArray);
        const index = this.indexOF(
          this.tableDataStore,
          "cropall",
          this.addform.cropinfo
        );

        if (index > -1) {
          alert("这个植物已经存在了哦！请重新输入");
          console.log("存在");
        } else if (
          this.stage1growimgfileArray.length == 0 ||
          this.stage2growimgfileArray.length == 0 ||
          this.stage3growimgfileArray.length == 0 ||
          this.stage4growimgfileArray.length == 0
        ) {
          alert("还有图片忘了选啦~");
        } else {
          axios({
            method: "post",
            url: "http://localhost:8080/growtime/addgrowtimebackend",
            withCredentials: true,
            data: {
              stage1grownum: parseInt(this.addform.stage1grownum),
              stage2grownum: parseInt(this.addform.stage2grownum),
              stage3grownum: parseInt(this.addform.stage3grownum),
              stage4grownum: parseInt(this.addform.stage4grownum),
              stage1growday: parseInt(this.addform.stage1growday),
              stage2growday: parseInt(this.addform.stage2growday),
              stage3growday: parseInt(this.addform.stage3growday),
              stage4growday: parseInt(this.addform.stage4growday),
              stage1growimg: this.stage1growimgfileArray,
              stage2growimg: this.stage2growimgfileArray,
              stage3growimg: this.stage3growimgfileArray,
              stage4growimg: this.stage4growimgfileArray,
              stage1waterday: parseInt(this.addform.stage1waterday),
              stage2waterday: parseInt(this.addform.stage2waterday),
              stage3waterday: parseInt(this.addform.stage3waterday),
              stage4waterday: parseInt(this.addform.stage4waterday),
              stage1fertilize: parseInt(this.addform.stage1fertilize),
              stage2fertilize: parseInt(this.addform.stage2fertilize),
              stage3fertilize: parseInt(this.addform.stage3fertilize),
              stage4fertilize: parseInt(this.addform.stage4fertilize),
              cropinfo: this.addform.cropinfo,
              potinfo: this.addform.potinfo,
            },
          }).then((res) => {
            this.tableData = res.data.data;
            this.tableDataStore = res.data.data;
            console.log(res.data.data);
            this.tableData = res.data.data.slice(
              (this.page - 1) * this.size,
              this.page * this.size
            );
            this.total = res.data.data.length;
            this.selData = res.data.data;
            for (var i = 0; i < res.data.data.length; i++) {
              //console.log(res.data.data[i].cropinfo);
              this.tableimgList.push(res.data.data[i].growimg);
              this.cropOptions.push({
                value: res.data.data[i].cropall,
                label: res.data.data[i].cropall,
              });
              this.potOptions.push({
                value: res.data.data[i].potall,
                label: res.data.data[i].potall,
              });
            }
            this.handleArr(this.cropOptions);
            this.handleArr(this.potOptions);
            this.cropOptions.pop();
            this.potOptions.pop();
            //console.log("tableimglist:" + this.tableimgList);
            this.tableimg = this.tableimgList[0];
            //console.log("tableimg：-------->" + this.tableimg);
          });
          this.dialogaddFormVisible = false;
        }
      } else {
        ElMessage.error("存在未输入项");
      }
    },
    handleArr(arr) {
      for (let i = 0; i < arr.length; i++) {
        for (let y = i + 1; y < arr.length; y++) {
          if (arr[i].value === arr[y].value) {
            arr.splice(y, 1);
            y--; //对应上文的splice删除元素的注意事项
          }
        }
      }
      return arr;
    },
  },
  mounted() {
    //页面加载完成后，将数据库内的内容赋给定义的data变量
    this.init();
  },
};
</script>
<style scoped>
#sidepart {
  width: 100%;
  position: absolute;
  top: 5px;
  font-family: "华文中宋";
}

#mainpart {
  width: 100%;
  position: absolute;
  top: 20px;
  /* left: 260px; */
  font-family: "华文中宋";
}

/* dialog */
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

#spanpart {
  font-size: 30px;
  font-family: "华文中宋";
}

#spanlittlepart {
  font-size: 15px;
  color: cadetblue;
  font-family: "华文中宋";
}

.spaninput {
  margin-right: 10px;
  margin-top: 10px;
}

.addbtn {
  width: 80%;
  margin-bottom: 20px;
  font-family: "华文中宋";
  position: relative;
  left: -50px;
}

.previewTitlePic {
  width: 40%;
  margin-bottom: 10px;
}
</style>